// 基础色彩系统
$primary-color: #1890ff;
$success-color: #52c41a;
$warning-color: #faad14;
$error-color: #f5222d;
$info-color: #1890ff;

// 中性色
$white: #ffffff;
$black: #000000;
$text-color-primary: rgba(0, 0, 0, 0.85);
$text-color-secondary: rgba(0, 0, 0, 0.65);
$text-color-disabled: rgba(0, 0, 0, 0.45);
$border-color: #d9d9d9;
$bg-color: #f0f2f5;

// 字体
$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
  'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
  'Noto Color Emoji';
$font-size-base: 14px;
$font-size-sm: 12px;
$font-size-lg: 16px;
$font-size-xl: 20px;

// 间距
$spacing-base: 4px;
$spacing-xs: $spacing-base * 1.5; // 6px
$spacing-sm: $spacing-base * 2; // 8px
$spacing-md: $spacing-base * 4; // 16px
$spacing-lg: $spacing-base * 6; // 24px
$spacing-xl: $spacing-base * 8; // 32px

// 圆角
$border-radius-base: 4px;
$border-radius-sm: 2px;
$border-radius-lg: 8px;
$border-radius-circle: 50%;

// 阴影
$box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15);
$box-shadow-light: 0 1px 2px rgba(0, 0, 0, 0.08);
$box-shadow-dark: 0 4px 12px rgba(0, 0, 0, 0.25);

// 动画
$transition-duration: 0.3s;

// 布局
$header-height: 64px;
$sidebar-width: 256px;
$sidebar-collapsed-width: 80px;
$content-padding: $spacing-md;

// 响应式断点
$screen-xs: 576px;
$screen-sm: 768px;
$screen-md: 992px;
$screen-lg: 1200px;
$screen-xl: 1600px;

// 混合函数
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@mixin ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@mixin multi-ellipsis($lines: 2) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
}

@mixin responsive($breakpoint) {
  @if $breakpoint == xs {
    @media (max-width: $screen-xs) {
      @content;
    }
  } @else if $breakpoint == sm {
    @media (max-width: $screen-sm) {
      @content;
    }
  } @else if $breakpoint == md {
    @media (max-width: $screen-md) {
      @content;
    }
  } @else if $breakpoint == lg {
    @media (max-width: $screen-lg) {
      @content;
    }
  } @else if $breakpoint == xl {
    @media (max-width: $screen-xl) {
      @content;
    }
  }
} 